<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>结账</title>

    <link rel="stylesheet" href="cart.css">

</head>

<body>
    <div id="header">
        <div class="header-fl">
            <img src="img/to.png" alt="">


        </div>
        <!-- <img src="../h52008二阶段/project 2/img/img5.jpg" alt=""> -->

    </div>
    <div class="list">
        <ul class="list-1">
            <li>
                <a href="">智能手机</a> </li>
            <li>
                <a href="">AXON系列</a> </li>
            <li>
                <a href="">BALDE系列</a>
            </li>
            <li>
                <a href="">OLDE系列</a> </li>
            <li>
                <a href="">智能终端</a> </li>
            <li>
                <a href="">手机配件</a> </li>
            <li>
                <a href="">线下门店</a> </li>
            <li>
                <a href="">会员中心</a> </li>
            <li>
                <span class="iconfont icon-sousuo"></span> </li>

        </ul>

    </div>
    <div id="cart">
        <div class="cart-1">
            <h1 class="cart-header"><a href="../project 2/homePage.html">
                购物车内暂时无商品，去首页挑选吧<span>(0)</a></span>
            </h1>
            <div class="cart-left">

                <section>

                    <div class="header-cart">
                        <div class="header-cart-1">
                            <p>产品</p>
                            <p>价格</p>
                            <p>数量</p>
                            <p>总计</p>
                        </div>

                        <div class="cart-content">
                            <div class="cart-item">
                                <img src="img/photo.jpg" style="width: 123px;" alt="">
                                <div class="cart-con-1">
                                    <p>The AXON</p>
                                    <p>axon 20</p>
                                    <p>运行内存</p>
                                    <p class="move">移除</p>
                                </div>
                                <div class="cart-con-2">
                                    <p class="price">2780</p>
                                </div>
                                <div class="cart-con-3">
                                    <select id="shuliang" class="number">
                                        <option value="1">1</option>
                                        <option value="2">2</option>
                                        <option value="3">3</option>
                                        <option value="4">4</option>
                                        <option value="5">5</option>
                                        <option value="6">6</option>
                                       </select>
                                </div>
                                <div class="cart-con-4">
                                    ￥<span></span>
                                </div>
                            </div>
                        </div>
                        <div class="cart-content">
                            <div class="cart-item">
                                <img src="img/photo2.png" style="width: 123px;" alt="">
                                <div class="cart-con-1">
                                    <p>The BALDE</p>
                                    <p>balde v2020 </p>
                                    <p>运行内存</p>
                                    <p class="move">移除</p>
                                </div>
                                <div class="cart-con-2">
                                    <p class="price">2780</p>
                                </div>
                                <div class="cart-con-3">
                                    <select id="shuliang" class="number">
                                        <option value="1">1</option>
                                        <option value="2">2</option>
                                        <option value="3">3</option>
                                        <option value="4">4</option>
                                        <option value="5">5</option>
                                        <option value="6">6</option>
                                       </select>
                                </div>
                                <div class="cart-con-4">
                                    ￥<span></span>
                                </div>
                            </div>
                        </div>
                        <div class="cart-content">
                            <div class="cart-item">
                                <img src="img/photo4.jpg" style="width: 123px;" alt="">
                                <div class="cart-con-1">
                                    <p>The BALDE </p>
                                    <p>balde 2021</p>
                                    <p>运行内存</p>
                                    <p class="move">移除</p>
                                </div>
                                <div class="cart-con-2">
                                    <p class="price">3980</p>
                                </div>
                                <div class="cart-con-3">
                                    <select id="shuliang" class="number">
                                        <option value="1">1</option>
                                        <option value="2">2</option>
                                        <option value="3">3</option>
                                        <option value="4">4</option>
                                        <option value="5">5</option>
                                        <option value="6">6</option>
                                       </select>
                                </div>
                                <div class="cart-con-4">
                                    ￥<span></span>
                                </div>
                            </div>
                        </div>
                        <div class="cart-content">
                            <div class="cart-item">
                                <img src="img/photo7.jpg" style="width: 123px;" alt="">
                                <div class="cart-con-1">
                                    <p>The BALDE</p>
                                    <p>blade v7</p>
                                    <p>运行内存</p>
                                    <p class="move">移除</p>
                                </div>
                                <div class="cart-con-2">
                                    <p class="price">36666</p>
                                </div>
                                <div class="cart-con-3">
                                    <select id="shuliang" class="number">
                                        <option value="1">1</option>
                                        <option value="2">2</option>
                                        <option value="3">3</option>
                                        <option value="4">4</option>
                                        <option value="5">5</option>
                                        <option value="6">6</option>
                                       </select>
                                </div>
                                <div class="cart-con-4">
                                    ￥<span></span>
                                </div>
                            </div>

                        </div>


                        <div class="zongjia">
                            小计￥<span>0</span>
                        </div>
                    </div>
                    <div class="jiesuan">
                        <a href="">继续购物</a>

                    </div>

                </section>
            </div>

</body>

</html>
<script src="jquery.min.js"></script>
<script src="cart.js"></script>
<script>
    let userInfo = sessionStorage.getItem("userInfo");
    if (userInfo) {
        $(".mun #denglu").text("退出登录")
        $(".mun #denglu").attr("href", "index.html")
        $(".mun #denglu").click(function() {
            sessionStorage.removeItem("userInfo")
            $(".mun #denglu").text("登录")
        })
    }
    $(".mun #gouwuche").click(function() {
        if (!suserInfo) {
            alert("您还未登录！")
            $(".mun #gouwuche").attr("href", "signin.html")
        }
    })
</script>
<script>
    // 数量
    function shu() {
        $(".cart-header span").html("(" + $(".cart-content").length + ")");
        // $(".cart-2 b").html($(".cart-content").length);
    }
    //总价
    function zongjia() {
        let zongjias = 0
        for (let i = 0; i < $(".cart-con-4 span").length; i++) {
            zongjias += Number($(".cart-con-4 span").eq(i).html())
        }
        $(".zongjia").html("小计￥" + zongjias)
            // $(".total").html(zongjias)
        $(".cart-right-1 .price").html("￥" + $(".total").html())
    }
    let nums = $(".number")
        // let price = $(".price");
        // $(".cart-con-4 span").html(price.html())
    $(".cart-content").click(function() {
            let index = $(this).index()
            var str = $(this).find(".number").map(function() {
                return $(this).val();
            }).get().join(", ");
            cartCon = $(".cart-con-4 span").eq(index - 1).html($(this).find(".price").html() * str)
            $(".zongjia span").html(cartCon.html())
            $(".cart-right-1 .price").html("￥" + cartCon.html())
                // 总价
            zongjia()
        })
        // 总价
    zongjia()
        // 删除
    $(".move").click(function() {
        let index = $(this).index
        if (confirm("真的要删除吗？")) {
            $(this).closest('.cart-content').remove()
            $(".total").html()
            $(".cart-right-1 .price").html("￥" + "0")
            $(".zongjia span").html("￥" + "0")
        }
        shu()
        zongjia()
    })
    shu()
</script>